<template>
  <div class="user_profile">
    <input type="file" hidden ref="inputFile" @change="onChangedFile" />
    <!-- 用户 资料 头部 导航栏 -->
    <van-nav-bar class="page-nav-bar" title="用户资料">
      <van-icon slot="left" name="arrow-left" @click="$router.back()" />
    </van-nav-bar>
    <!-- 用户 数据 列表展示 -->
    <van-cell-group>
      <van-cell title="头像" is-link @click="$refs.inputFile.click()">
        <template slot="default">
          <van-image
            width="30px"
            height="30px"
            fit="cover"
            round
            :src="userProfile.photo"
          />
        </template>
      </van-cell>
      <van-cell
        title="昵称"
        @click="isNikeName = true"
        :value="userProfile.name"
        is-link
      ></van-cell>
      <van-cell
        title="性别"
        @click="isGenderShow = true"
        :value="userProfile.gender === 1 ? '女' : '男'"
        is-link
      ></van-cell>
      <van-cell
        title="生日"
        @click="isBirthday = true"
        :value="userProfile.birthday"
        is-link
      >
        <template slot="value">
          <userItem></userItem>
        </template>
      </van-cell>
    </van-cell-group>
    <!-- 弹出层1 编辑用户昵称 -->
    <van-popup
      v-model="isNikeName"
      @input="isNikeName = $event"
      position="bottom"
      :style="{ height: '100%' }"
    >
      <userNikeName
        v-if="isNikeName"
        :nikeName="userProfile.name"
        @changeView="userProfile.name = $event"
        @onClose="isNikeName = false"
      ></userNikeName>
    </van-popup>
    <!-- 弹出层2 编辑用户性别 -->
    <van-popup
      v-model="isGenderShow"
      @input="isGenderShow = $event"
      position="bottom"
      :style="{ height: '40%' }"
    >
      <userGender
        v-if="isGenderShow"
        :gender="userProfile.gender"
        @changeView="userProfile.gender = $event"
        @onCloseGender="isGenderShow = false"
      ></userGender>
    </van-popup>
    <!-- 弹出层3 编辑用户生日信息 -->
    <van-popup
      v-model="isBirthday"
      @input="isBirthday = $event"
      position="bottom"
      :style="{ height: '40%' }"
    >
      <userDirthday
        v-if="isBirthday"
        :birthday="userProfile.birthday"
        @changeView="userProfile.birthday = $event"
        @onClosebirthday="isBirthday = false"
      ></userDirthday>
    </van-popup>
    <!-- 弹出层4 编辑用户头像 -->
    <van-popup
      v-model="isAvatar"
      @input="isAvatar = $event"
      position="bottom"
      :style="{ height: '100%' }"
    >
      <userAvatar
        v-if="isAvatar"
        :imgUrl="Img"
        @changeView="userProfile.photo = $event"
        @onCloseAvatar="doClearAvatar"
      ></userAvatar>
    </van-popup>
  </div>
</template>

<script>
// 导入 用户详情项 组件
import userNikeName from './components/user_nikename.vue'
// 导入 用户详情项 组件
import userGender from './components/user_gender.vue'
// 导入 用户详情项 组件
import userDirthday from './components/user_birthday.vue'
// 导入 用户详情项 组件
import userAvatar from './components/user_avatar.vue'
// 获取 用户 资料接口
import { getUserProfile } from '@/api/user.js'
export default {
  name: 'userProfile',
  components: {
    userNikeName,
    userGender,
    userDirthday,
    userAvatar
  },
  props: {},
  data() {
    return {
      // 用户的 个人资料
      userProfile: {},
      // 显示 编辑用户 名称弹出层
      isNikeName: false,
      // 显示用户 性别选择弹框
      isGenderShow: false,
      // 显示用户 生日日期弹框
      isBirthday: false,
      // 显示用户 头像设置
      isAvatar: false,
      // 获取到 用户选择的 图片文件数据
      Img: null
    }
  },
  async created() {
    const { data } = await getUserProfile()
    console.log(data.data)
    // 赋值给 用户 个人资料
    this.userProfile = data.data
    console.log(this.userProfile)
  },
  methods: {
    //  当文件域发生变化 的时候 那么就会触发这个 change事件
    onChangedFile() {
      console.log('这是文件改变了嘛？小可爱~~~ 这里可以拿到 文件域的数据文件')
      console.log(this.$refs.inputFile.files[0])
      const file = this.$refs.inputFile.files[0]
      // 解析文件数据 成一个url地址
      this.Img = window.URL.createObjectURL(file)
      console.log('这是转化成blob数据的 文件图片', this.Img)
      // 打开 头像编辑 组件
      this.isAvatar = true
    },
    doClearAvatar() {
      this.isAvatar = false
      // 清空 文本域的值 这样 相同 文件 可以重复触发change事件
      this.$refs.inputFile.value = ''
    }
  },
  computed: {},
  watch: {}
}
</script>

<style lang="less" scoped>
</style>
F
